<template>
  <div class="flap-card-wrapper">
    <!-- 动画卡片 -->
    <div
      class="flap-card-bg"
      :class="{ animation: runFlapCardAnimation }"
      v-if="ifShowFlapCard"
    >
      <div
        class="flap-card"
        v-for="(item, index) in flapCardList"
        :key="index"
        :style="{ zIndex: item.zIndex }"
      >
        <!-- 圆 -->
        <div class="flap-card-circle">
          <!-- 左半圆 -->
          <div
            class="flap-card-semi-circle flap-card-semi-circle-left"
            :style="semiCricelStyle(item, 'left')"
            ref="left"
          ></div>
          <!-- 右半圆 -->
          <div
            class="flap-card-semi-circle flap-card-semi-circle-right"
            :style="semiCricelStyle(item, 'right')"
            ref="right"
          ></div>
        </div>
      </div>
      <div class="point-wrapper">
        <div
          class="point"
          v-for="(item, index) in pointList"
          :key="index - 1"
          :class="{ animation: runPointAnimation }"
        ></div>
      </div>
    </div>
    <!-- 推荐图书卡片 -->
    <div
      class="book-card"
      :class="{ animation: runBookCardAnimation }"
      v-show="ifShowBookCard"
    >
      <div class="book-card-wrapper">
        <div class="img-wrapper">
          <img class="img" src="" alt="" />
        </div>
        <div class="content-wrapper">
          <div class="title"></div>
          <div class="author sub-title-medium"></div>
          <div class="category">{{ categoryText() }}</div>
        </div>
        <div class="read-btn" @click.stop="showBookDetail">
          {{ $t('home.readNow') }}
        </div>
      </div>
    </div>
    <!-- 关闭按钮 -->
    <div class="close-btn-wrapper" @click="colse">
      <span class="icon-close"></span>
    </div>
  </div>
</template>

<script>
import { storeHomeMixin } from '../../utils/mixin'
import { flapCardList, categoryText } from '../../utils/store'
export default {
  mixins: [storeHomeMixin],
  props: {
    data: Object
  },
  data() {
    return {
      // flapCar dList: flapCardList 两种写法一样
      flapCardList, // 卡片数组
      front: 0, // 前面卡片
      back: 1, // 背面卡片
      runFlapCardAnimation: false, // 控制烟花动画
      pointList: [], // 烟花小球
      runPointAnimation: false, // 烟花小球的显示和隐藏
      ifShowFlapCard: true, // 卡片的显示与隐藏
      IntervalTime: 20,
      ifShowBookCard: false, // 推荐卡片的显示隐藏
      runBookCardAnimation: false // 推荐卡片动画
    }
  },
  methods: {
    // 根据id 找到国际化
    categoryText() {
      if (this.data) {
        return categoryText(this.data.category, this)
      } else {
        return ''
      }
    },
    colse() {
      this.setFlapCardVisible(false)
      console.log(this.flapCardList)
      this.stopAnimation()
    },
    // 圆的样式
    semiCricelStyle(item, direction) {
      return {
        backgroundColor: `rgb(${item.r} ,${item.g} ,${item.b})`,
        backgroundImage: direction === 'left' ? item.imgLeft : item.imgRight,
        backgroundSize: item.backgroundSize
      }
    },
    // 实现反转
    rotate(index, type) {
      const item = this.flapCardList[index]
      let dom
      if (type === 'front') {
        dom = this.$refs.right[index]
      } else {
        dom = this.$refs.left[index]
      }
      if (dom) {
        // 旋转到自己对应样式的样子
        dom.style.transform = `rotateY(${item.rotateDegree}deg)`
        dom.style.backgroundColor = `rgb(${item.r} ,${item._g} ,${item.b})`
      }
    },
    // 反转逻辑
    flapCardRotate() {
      const frontFlapCard = this.flapCardList[this.front]
      const backFlapCard = this.flapCardList[this.back]
      // 正面
      frontFlapCard.rotateDegree += 10
      frontFlapCard._g -= 5
      // 背面
      backFlapCard.rotateDegree -= 10
      // 这时背面才显示 再变化值
      if (backFlapCard.rotateDegree < 90) {
        backFlapCard._g += 5
      }
      // 临界点 当 转动到 90° 下面就覆盖上面的
      if (
        frontFlapCard.rotateDegree === 90 &&
        backFlapCard.rotateDegree === 90
      ) {
        backFlapCard.zIndex += 2
      }
      this.rotate(this.front, 'front')
      this.rotate(this.back, 'back')
      // 判断是否到达下一个卡片
      if (
        frontFlapCard.rotateDegree === 180 &&
        backFlapCard.rotateDegree === 0
      ) {
        // 切换下一组
        this.next()
      }
    },
    // 下一组卡片
    next() {
      const frontFlapCard = this.flapCardList[this.front]
      const backFlapCard = this.flapCardList[this.back]
      // 归位
      frontFlapCard._g = frontFlapCard.g
      backFlapCard._g = backFlapCard.g
      frontFlapCard.rotateDegree = 0
      backFlapCard.rotateDegree = 0
      this.rotate(this.front, 'front')
      this.rotate(this.back, 'back')
      this.front++
      this.back++
      const len = this.flapCardList.length
      if (this.front >= len) {
        this.front = 0
      }
      if (this.back >= len) {
        this.back = 0
      }
      this.flapCardList.forEach((item, index) => {
        item.zIndex = 100 - ((index - this.front + len) % len)
      })
      this.prepare()
    },
    // 左边半圆和右边半圆重叠
    prepare() {
      const backFlapCard = this.flapCardList[this.back]
      backFlapCard.rotateDegree = 180
      backFlapCard._g = backFlapCard.g - 5 * 9
      this.rotate(this.back, 'back')
    },
    // 烟花动画启动
    startPointAnimation() {
      this.runPointAnimation = true
    },
    // 卡片反转动画启动
    startFalpCardAnimation() {
      this.prepare()
      this.task = setInterval(() => {
        this.flapCardRotate()
      }, this.IntervalTime)
      // 模仿axios 请求成功 隐藏卡片和小球
      this.timeOut = setTimeout(() => {
        this.stopAnimation()
      }, 2500)
    },
    // 对所有的卡片进行重置
    reset() {
      this.front = 0
      this.back = 1
      this.flapCardList.forEach((item, index) => {
        // 重置操作 100 99 98 97 96
        item.zIndex = 100 - index
        item._g = item.g
        item.rotateDegree = 0
        // 调用rotate 让左右两边都回到最初位置
        this.rotate(index, 'front')
        this.rotate(index, 'back')
      })
    },
    // 停止卡片反转动画
    stopAnimation() {
      this.reset()
      this.runFlapCardAnimation = false
      this.ifShowFlapCard = false
      this.ifShowBookCard = true
      this.runBookCardAnimation = true
      if (this.task) {
        clearInterval(this.task)
      }
      if (this.timeOut) {
        clearTimeout(this.timeOut)
      }
    },
    // 启动动画
    runAnimation() {
      setTimeout(() => {
        this.startFalpCardAnimation()
        this.startPointAnimation()
      }, 300)
    }
  },
  watch: {
    flapCardVisible(v) {
      console.log(this.data)
      if (v) {
        this.ifShowFlapCard = true
        this.ifShowBookCard = false
        this.runAnimation()
      }
    }
  },
  created() {
    for (let i = 0; i < 18; i++) {
      this.pointList.push(`point${i}`)
    }
    console.log(this.pointList)
  }
}
</script>

<style lang='scss' scopde>
@import '../../assets/style/global.scss';
@import '../../assets/style/flapCard.scss';
.flap-card-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  @include center;
  .flap-card-bg {
    position: relative;
    width: px2rem(64);
    height: px2rem(64);
    border-radius: px2rem(5);
    background: white;
    &.animation {
      animation: flap-card-move 0.3s ease-in;
    }
    @keyframes flap-card-move {
      0% {
        transform: scale(0);
        opacity: 0;
      }
      50% {
        transform: scale(1.2);
        opacity: 1;
      }
      75% {
        transform: scale(0.9);
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
    .flap-card {
      width: px2rem(48);
      height: px2rem(48);
      @include absCenter;
      .flap-card-circle {
        display: flex;
        width: 100%;
        height: 100%;
        .flap-card-semi-circle {
          flex: 0 0 50%;
          width: 50%;
          height: 100%;
          background-repeat: no-repeat;
        }
        .flap-card-semi-circle-left {
          border-radius: px2rem(24) 0 0 px2rem(24);
          background-position: center right;
          // 转动轴
          transform-origin: right;
          // 转动背面隐藏
          backface-visibility: hidden;
        }
        .flap-card-semi-circle-right {
          border-radius: 0 px2rem(24) px2rem(24) 0;
          background-position: center left;
          transform-origin: left;
          backface-visibility: hidden;
        }
      }
    }
  }
  .book-card {
    position: relative;
    width: 65%;
    box-sizing: border-box;
    border-radius: px2rem(15);
    background: white;
    &.animation {
      animation: scale 0.3s ease-in both;
      @keyframes scale {
        0% {
          transform: scale(0);
          opacity: 0;
        }
        100% {
          transform: scale(1);
          opacity: 1;
        }
      }
    }
    .book-card-wrapper {
      width: 100%;
      height: 100%;
      margin-bottom: px2rem(30);
      @include columnTop;
      .img-wrapper {
        width: 100%;
        margin-top: px2rem(20);
        @include center;
        .img {
          width: px2rem(90);
          height: px2rem(130);
        }
      }
      .content-wrapper {
        padding: 0 px2rem(20);
        margin-top: px2rem(20);
        .title {
          color: #333;
          font-weight: bold;
          font-size: px2rem(18);
          line-height: px2rem(20);
          max-height: px2rem(40);
          text-align: center;
          @include ellipsis2(2);
        }
        .author {
          margin-top: px2rem(10);
          text-align: center;
        }
        .category {
          color: #999;
          font-size: px2rem(14);
          margin-top: px2rem(10);
          text-align: center;
        }
      }
      .read-btn {
        position: absolute;
        bottom: px2rem(-15);
        left: 0;
        z-index: 1100;
        width: 100%;
        border-radius: 0 0 px2rem(15) px2rem(15);
        padding: px2rem(15) 0;
        text-align: center;
        color: white;
        font-size: px2rem(14);
        background: $color-blue;
      }
    }
  }
  .point-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2000;
    @include center;
    .point {
      @include absCenter;
      z-index: 3000;
      border-radius: 50%;
      transform: scale(0);
      &.animation {
        @for $i from 1 to length($moves) - 1 {
          &:nth-child(#{$i}) {
            @include move($i);
          }
        }
      }
    }
  }
  .close-btn-wrapper {
    position: absolute;
    left: 0;
    bottom: px2rem(50);
    width: 100%;
    z-index: 1100;
    @include center;
    .icon-close {
      width: px2rem(45);
      height: px2rem(45);
      font-size: px2rem(25);
      border-radius: 50%;
      color: white;
      background: #2f2f2e;
      @include center;
    }
  }
}
</style>
